<template>
  <div class="nav-menu">
    <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
      <div v-for="(item, index) in menulist" :key="index">
        <a-menu-item v-if="!item.children" :key="item.path" @click="changeMenu(item.path)">
          <pie-chart-outlined />
          <span>{{ item?.meta?.title ?? item.name }}</span>
        </a-menu-item>
        <a-sub-menu v-else :key="item.path + 1">
          <template #title>
            <span>
              <user-outlined />
              <span>{{ item?.meta?.title ?? item.name }}</span>
            </span>
          </template>
          <NavMenu :menulist="item.children" />
        </a-sub-menu>
      </div>
    </a-menu>
  </div>
</template>

<script setup lang="ts">
import type { RouteRecordRaw } from 'vue-router'
defineOptions({
  name: 'NavMenu'
})

interface Props {
  menulist: RouteRecordRaw[]
}

withDefaults(defineProps<Props>(), {
  menulist: () => []
})

// import { useCommonStore } from '@/store/common'

// const commonStore = useCommonStore()

const router = useRouter()
const selectedKeys = ref<string[]>(['1'])
// const menuList = ref([])
// const hasChildren = item => {
//   return item.children && !item.children.every(item => item.meta.hidden)
// }

// 页面切换
const changeMenu = (route: string) => {
  if (router.currentRoute.value.path !== route) {
    //获取路由对象并切换
    router.push(route)
  }
}
</script>

<style scoped lang="less">
.nav-menu {
  width: 100%;
}
</style>
